<template>
  <div class="list">
    <AppVideoItem v-for="item in list.videoList" :key="item.id" :video="item" />
  </div>
</template>

<script setup lang="ts">
import AppVideoItem from '@/components/app-video-item.vue'
import { ref, defineProps, PropType } from 'vue'
import axios from 'axios'

interface IVideoItem {
  id: number;
  imgSrc: string;
  desc: string;
  playCount: string;
  commentCount: string;
  videoSrc: string;
}
interface VideoItem {
  id: number;
  videoList: IVideoItem[];
}
// interface IdParams {
//   id: string;
// }
const list = ref<VideoItem[]>([])
const props = defineProps({
  id: String
})
axios({
  method: 'get',
  url: '/videosList',
  params: { id: props.id }
}).then(res => {
  list.value = res.data.result
  console.log(list.value.videoList)
})
// 🔔 父传子需要通过 defineProps 接收
// 🔔 PropType 用于指定格式

</script>

<style lang="less">
.list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1vw;
}
</style>
